<template>
    <el-form ref="setting" :model="userProjectSettingData" :rules="settingRules">
        <el-row align="top" class="project-setting-container" justify="center" type="flex">

          <el-col :span="10" class="project-setting-view">
                <p class="project-setting-title">
                    提交设置
                </p>
                <el-row align="middle" type="flex">
                    <el-col :span="12">
                        <p class="project-setting-label">提示图片</p>
                    </el-col>
                    <el-col :span="12">
                        <el-switch
                            v-model="projectSetting.showPromptImg"
                            @change="()=>{this.userProjectSettingData.submitPromptImg=''}"
                        />
                    </el-col>
                </el-row>
                <div v-if="projectSetting.showPromptImg">
                    <div class="block">
                        <el-image
                            :src="userProjectSettingData.submitPromptImg"
                            class="submit-prompt-img"
                            fit="cover "
                        >
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline" />
                            </div>
                        </el-image>
                    </div>
                    <el-upload
                        ref="logoUpload"
                        :action="getUploadUrlBase64"
                        :headers="getUploadHeader"
                        :on-success="uploadSubmitPromptHandle"
                        :show-file-list="false"
                        accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
                    >
                        <el-button slot="trigger" size="small" type="text">请上传提示图片 *</el-button>
                    </el-upload>
                </div>
                <el-row align="middle" type="flex">
                    <el-col :span="12">
                        <p class="project-setting-label">提示文字</p>
                    </el-col>
                    <el-col :span="12">
                        <el-switch
                            v-model="projectSetting.showPromptText"
                            @change="()=>{
                                this.userProjectSettingData.submitPromptText=''
                                this.saveUserProjectSetting()
                            }"
                        />
                    </el-col>
                </el-row>
                <el-row v-if="projectSetting.showPromptText">
                    <el-col :span="20" class="setting-input">
                        <el-input v-model="userProjectSettingData.submitPromptText"
                                  :maxlength="50"
                                  :show-word-limit="true"
                                  @change="saveUserProjectSetting"
                        />
                    </el-col>
                </el-row>
                <el-row align="middle" type="flex">
                    <el-col :span="12">
                        <p class="project-setting-label">跳转网页地址</p>
                    </el-col>
                    <el-col :span="12">
                        <el-switch
                            v-model="projectSetting.showSubmitJumpUrl"
                            @change="()=>{
                                this.userProjectSettingData.submitJumpUrl=''
                                this.saveUserProjectSetting()
                            }"
                        />
                    </el-col>
                </el-row>
                <el-row v-if="projectSetting.showSubmitJumpUrl">
                    <el-col :span="20" class="setting-input">
                        <el-input
                            v-model="userProjectSettingData.submitJumpUrl"
                            :show-word-limit="true"
                            placeholder="https://www.duojuhe.com"
                            @change="saveUserProjectSetting"
                        />
                    </el-col>
                </el-row>
                <el-row align="middle" type="flex">
                    <el-col :span="12">
                        <p class="project-setting-label">公开反馈结果</p>
                    </el-col>
                    <el-col :span="12">
                        <el-switch
                            v-model="userProjectSettingData.resultPublic"
                            @change="()=>{
                                this.saveUserProjectSetting()
                            }"
                        />
                    </el-col>
                </el-row>
            </el-col>

          <el-col :span="10" class="project-setting-view text-center">
            <p class="project-setting-title">
              回收设置
            </p>
            <el-row align="middle" type="flex">
              <el-col :span="12">
                <p class="project-setting-label">限制填写次数</p>
              </el-col>
              <el-col :span="12">
                <el-switch
                  v-model="userProjectSettingData.limitWrite"
                  @change="saveUserProjectSetting"
                />
              </el-col>
            </el-row>

            <div v-if="userProjectSettingData.limitWrite">
              <el-row align="middle" type="flex">
                <el-col :span="5">
                  <p class="project-setting-sub-label">允许次数：</p>
                </el-col>
                <el-col :span="10">
                  <el-select  style="width: 100%;"  @change="saveUserProjectSetting" v-model="userProjectSettingData.limitWriteNumMode" size="small" placeholder="请选择">
                    <el-option key="1" label="总共" value="1"/>
                    <el-option key="2" label="每天" value="2"/>
                  </el-select>
                </el-col>
                <el-col :span="9">
                  <el-input-number size="small"  controls-position="right"  style="width: 100%" v-model="userProjectSettingData.everyoneWriteNum" @change="saveUserProjectSetting" :step="1" step-strictly :min="1" :max="100000000" label="允许次数"></el-input-number>
                </el-col>
              </el-row>
            </div>


            <el-row align="middle" type="flex">
              <el-col :span="12">
                <p class="project-setting-label">是否定时收集</p>
              </el-col>
              <el-col :span="12">
                <el-switch
                  v-model="userProjectSettingData.showTimedCollection"
                  @change="()=>{
                                this.saveUserProjectSetting()
                            }"
                />
              </el-col>
            </el-row>
            <div v-if="userProjectSettingData.showTimedCollection">
              <el-row align="middle" type="flex">
                <el-col :span="5">
                  <p class="project-setting-sub-label">开始时间</p>
                </el-col>
                <el-col :span="19">
                  <el-date-picker
                    v-model="userProjectSettingData.timedCollectionBeginTime"
                    align="center"
                    class="collection-date-picker"
                    placeholder="选择开始时间"
                    style="width: 100%; border: none;"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="saveUserProjectSetting"
                  />
                </el-col>
              </el-row>

              <el-row align="middle" type="flex">
                <el-col :span="5">
                  <p class="project-setting-sub-label">结束时间</p>
                </el-col>
                <el-col :span="19">
                  <el-date-picker
                    v-model="userProjectSettingData.timedCollectionEndTime"
                    align="center"
                    class="collection-date-picker"
                    placeholder="结束日期"
                    style="width: 100%; border: none;"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="saveUserProjectSetting"
                  />
                </el-col>
              </el-row>

              <el-row align="middle" type="flex">
                <el-col :span="5">
                  <p class="project-setting-sub-label">未开始提示：</p>
                </el-col>
                <el-col :span="19">
                  <el-input v-model="userProjectSettingData.timedNotEnabledPromptText" :maxlength="50"
                            :show-word-limit="true"
                            class="setting-input"
                            @change="saveUserProjectSetting"
                  />
                </el-col>
              </el-row>

              <el-row align="middle" type="flex">
                <el-col :span="5">
                  <p class="project-setting-sub-label">结束提示：</p>
                </el-col>
                <el-col :span="19">
                  <el-input v-model="userProjectSettingData.timedDeactivatePromptText" :maxlength="50"
                            :show-word-limit="true"
                            class="setting-input"
                            @change="saveUserProjectSetting"
                  />
                </el-col>
              </el-row>
            </div>

            <el-row align="middle" type="flex">
              <el-col :span="12">
                <p class="project-setting-label">是否定量收集</p>
              </el-col>
              <el-col :span="12">
                <el-switch
                  v-model="userProjectSettingData.showQuantitative"
                  @change="()=>{this.saveUserProjectSetting()}"
                />
              </el-col>
            </el-row>
            <div v-if="userProjectSettingData.showQuantitative">
              <el-row align="middle" type="flex">
                <el-col :span="5">
                  <p class="project-setting-sub-label">收集总量：</p>
                </el-col>
                <el-col :span="19">
                  <el-input-number size="small"  controls-position="right"  style="width: 100%" v-model="userProjectSettingData.quantitativeTotalQuantity" @change="saveUserProjectSetting" :step="1" step-strictly :min="1" :max="100000000" label="收集总量"></el-input-number>
                </el-col>
              </el-row>

              <el-row align="middle" type="flex">
                <el-col :span="5">
                  <p class="project-setting-sub-label">完成提示：</p>
                </el-col>
                <el-col :span="19">
                  <el-input v-model="userProjectSettingData.quantitativeEndPromptText" :maxlength="50"
                            :show-word-limit="true"
                            class="setting-input"
                            @change="saveUserProjectSetting"
                  />
                </el-col>
              </el-row>
            </div>
          </el-col>

           <!-- <el-col :span="6" class="project-setting-view">
                <p class="project-setting-title">
                    分享设置
                </p>
                <el-row align="middle" type="flex">
                    <el-col :span="12">
                        <p class="project-setting-label">自定义分享图标</p>
                    </el-col>
                    <el-col :span="12">
                        <el-switch
                            v-model="projectSetting.customizeShareIcon"
                            @change="clearFieldHandle(['userProjectSettingData.shareImg'])"
                        />
                    </el-col>
                </el-row>
                <el-row v-if="projectSetting.customizeShareIcon" align="middle" type="flex">
                    <el-col :span="10">
                        <p class="project-setting-label">
                            请上传分享图片 *
                            建议尺寸500px*500px
                        </p>
                    </el-col>
                    <el-col :span="12">
                        <el-upload
                            ref="logoUpload"
                            :action="getUploadUrlBase64"
                            :headers="getUploadHeader"
                            :on-success="uploadShareImgHandle"
                            :show-file-list="false"
                            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
                        >
                            <div class="block">
                                <el-image
                                    :src="userProjectSettingData.shareImg"
                                    class="share-img"
                                    fit="cover "
                                >
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline" />
                                    </div>
                                </el-image>
                            </div>
                        </el-upload>
                    </el-col>
                </el-row>
                <el-row align="middle" type="flex">
                    <el-col :span="12">
                        <p class="project-setting-label">自定义分享标题</p>
                    </el-col>
                    <el-col :span="12">
                        <el-switch
                            v-model="projectSetting.customizeShareTitle"
                            @change="clearFieldHandle(['userProjectSettingData.shareTitle'])"
                        />
                    </el-col>
                </el-row>
                <el-row v-if="projectSetting.customizeShareTitle" align="middle"
                        type="flex"
                >
                    <el-col :span="8">
                        <p class="project-setting-sub-label">请输入标题：</p>
                    </el-col>
                    <el-col :span="15">
                        <el-input
                            v-model="userProjectSettingData.shareTitle"
                            :maxlength="50"
                            :show-word-limit="true"
                            class="setting-input" style="width: 80%;" @change="saveUserProjectSetting"
                        />
                    </el-col>
                </el-row>
                <el-row align="middle" type="flex">
                    <el-col :span="12">
                        <p class="project-setting-label">自定义分享描述</p>
                    </el-col>
                    <el-col :span="12">
                        <el-switch v-model="projectSetting.customizeShareDesc" />
                    </el-col>
                </el-row>
                <el-row v-if="projectSetting.customizeShareDesc" align="middle"
                        type="flex"
                >
                    <el-col :span="8">
                        <p class="project-setting-sub-label">请输入描述：</p>
                    </el-col>
                    <el-col :span="15">
                        <el-input
                            v-model="userProjectSettingData.shareDesc"
                            :maxlength="50"
                            :show-word-limit="true"
                            class="setting-input" style="width: 80%;" @change="saveUserProjectSetting"
                        />
                    </el-col>
                </el-row>
                <div
                    v-if="userProjectSettingData.shareDesc||userProjectSettingData.shareTitle||userProjectSettingData.shareImg"
                >
                    <p>分享卡片预览</p>
                    <div class="share-preview">
                        <div style="flex: 1" />
                        <div class="share-preview-msg">
                            <div class="share-preview-msg-box">
                                <p class="share-preview-msg-title">
                                    {{ /*userProjectSettingData.shareTitle*/ }}
                                </p>
                                <div class="share-preview-info">
                                    <p class="share-preview-msg-desc">
                                        {{ /*userProjectSettingData.shareDesc */}}
                                    </p>
                                    <div class="share-preview-img-box">
                                        <img v-if="userProjectSettingData.shareImg" :src="userProjectSettingData.shareImg" class="share-preview-img">
                                    </div>
                                </div>
                            </div>
                            <div class="share-preview-msg-angle" />
                        </div>
                        <div class="share-preview-avatar">
                            <img src="~@/assets/images/chat/detault-avatar.jpg" class="share-user-avatar">
                        </div>
                    </div>
                </div>
            </el-col>-->
        </el-row>
    </el-form>
</template>

<script>
import {queryFormProjectSettingResByProjectId, updateFormProjectSetting} from '@/api/form/formProjectSetting'
import {getAppApiUrl, getToken} from '@/utils/auth'
export default {
    name: 'ProjectSetting',
    data() {
        return {
            projectId: null,
            settingRules: {

            },
            projectSetting: {
                showPromptImg: false,
                showPromptText: true,
                showSubmitJumpUrl: false,
                customizeShareIcon: false,
                customizeShareTitle: false,
                customizeShareDesc: false,
                timingCollectForm:false
            },
            userProjectSettingData: {
                submitPromptImg: '',
                submitPromptText: '提交成功 !',
                submitJumpUrl: '',
                resultPublic: false,
                limitWrite: true,
                everyoneWriteNum:1,
                limitWriteNumMode:undefined,
                shareImg: '',
                shareTitle: '',
                shareDesc: '',
                showTimedCollection:false,
                timedCollectionBeginTime: '',
                timedCollectionEndTime: '',
                timedNotEnabledPromptText: '填写尚未启用',
                timedDeactivatePromptText: '填写尚已经停用',
                showQuantitative: false,
                quantitativeTotalQuantity: 0,
                quantitativeEndPromptText: '收集数量已完成，暂停收集'
            }
        }
    },
    computed: {
        getUploadHeader() {
            return {
              token: getToken(),
            }
        },
        getUploadUrlBase64() {
          return getAppApiUrl()+`/sysCommon/upload/imageSingleUploadToImageBase64`;
        },
    },
    mounted() {
        this.projectId = this.$route.query.key
        this.queryUserProjectSetting()
    },
    methods: {
        uploadSubmitPromptHandle(response) {
            this.userProjectSettingData.submitPromptImg = response.data
            this.saveUserProjectSetting()
        },
        uploadShareImgHandle(response) {
            this.userProjectSettingData.shareImg = response.data
            this.saveUserProjectSetting()
        },
        queryUserProjectSetting() {
            this.userProjectSettingData.projectId = this.projectId
            queryFormProjectSettingResByProjectId({"projectId":this.projectId}).then(res => {
                if (res.data) {
                    this.userProjectSettingData = res.data
                    let {submitPromptImg, submitPromptText, submitJumpUrl,shareImg, shareTitle, shareDesc, showTimedCollection} = res.data
                    this.projectSetting = {
                        showPromptImg: !!submitPromptImg,
                        showPromptText: !!submitPromptText,
                        showSubmitJumpUrl: !!submitJumpUrl,
                        timingCollectForm: !!showTimedCollection,
                        customizeShareIcon: !!shareImg,
                        customizeShareTitle: !!shareTitle,
                        customizeShareDesc: !!shareDesc
                    }
                }
            })
        },
        saveUserProjectSetting() {
            this.userProjectSettingData.projectId = this.projectId
            updateFormProjectSetting(this.userProjectSettingData).then(res => {})
        },
        clearFieldHandle(fields) {
            fields.forEach(field => {
                this.$set(this.userProjectSettingData, field, '')
            })
        }
    }
}
</script>

<style scoped>
.project-setting-container {
  width: 100%;
  height: 100%;
  min-height: 85vh;
  padding-top: 30px;
  margin: 0;
  background-color: #f7f7f7;
}

.project-setting-view {
  height: 100%;
  line-height: 40px;
  border-radius: 7px;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 100);
  background-color: white;
  margin-right: 10px;
  padding: 10px;
}

.project-setting-title {
  color: rgba(16, 16, 16, 100);
  font-size: 18px;
  text-align: left;
  font-weight: 500;
  margin-left: 0;
}

.project-setting-label {
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: left;
  line-height: 20px;
}

.project-setting-sub-label {
  color: rgba(144, 147, 149, 100);
  font-size: 14px;
  text-align: left;
  margin-left: 2px;
  line-height: 20px;
}

.submit-prompt-img {
  width: 100%;
  height: 117px;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
}

.sub-user-view {
  position: relative;
  width: 60px;
  cursor: pointer;
}

.sub-user-view:hover .sub-user-delete {
  display: block;
}

.sub-user-delete {
  position: absolute;
  right: -6px;
  background-color: red;
  color: white;
  border-radius: 50px;
  padding: 2px;
  font-size: 12px;
  height: 16px;
  width: 16px;
  font-weight: 500;
  line-height: 18px;
  display: none;
}

.share-img {
  width: 123px;
  height: 117px;
  background-color: #f7f7f7;
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
}

.share-preview {
  height: 162px;
  margin: 0 auto;
  border-radius: 5px;
  background-color: #0001;
  border: 1px solid rgba(255, 255, 255, 100);
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-around;
}

.share-preview-msg {
  width: 210px;
  margin-right: 25px;
  border-radius: 5px;
  background-color: white;
  color: rgba(16, 16, 16, 100);
  box-shadow: 0 0 3px 0 rgba(157, 158, 162, 100);
  padding: 7px 10px 10px;
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.share-preview-msg-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.share-preview-msg::after,.share-preview-msg-angle {
  content: '';
  border: 8px solid transparent;
  border-style: solid;
  border-left-color: rgba(157, 158, 162, 0.397);
  position: absolute;
  right: -15px;
  top: 16px;
  width: 0;
  z-index: -1;
}

.share-preview-msg-angle {
  border: 7px solid transparent;
  border-left-color: #ffffff;
  right: -13px;
  top: 17px;
  z-index: 1;
}

.share-preview-msg-title {
  line-height: 22px;
  margin: 0;
  color: rgba(16, 16, 16, 100);
  font-size: 14px;
  text-align: left;

  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.share-preview-info {
  flex: 1;
  display: flex;
  margin-top: 5px;
}

.share-preview-msg-desc {
  flex: 1;
  height: 100%;
  margin: 0;
  color: rgba(144, 147, 153, 100);
  font-size: 12px;
  line-height: 20px;
  text-align: left;

  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.share-preview-img-box {
  display: flex;
  align-items: flex-end;
  margin-left: 5px;
}
.share-preview-img {
  width: 49px;
  height: 46px;
}

.share-preview-avatar {
  margin-right: 30px;
  margin-top: -35px;
}

.share-user-avatar {
  width: 49px;
  height: 49px;
  border-radius: 6px;
}

::v-deep .setting-input input {
  border: none;
  border-bottom: 1px solid rgba(187, 187, 187, 100);
  border-radius: 0;
  line-height: 20px;
  height: 20px;
}

::v-deep .collection-date-picker input {
  border: none;
  border-bottom: 1px solid rgba(187, 187, 187, 100);
  border-radius: 0;
}

::v-deep .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin: 0;
}
</style>
